<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<div id="app">
			<!-- vue使用双向数据绑定的结构
				案例：1.input文本输入框
					2.textarea 文本框
					3.select 下拉框
					4.radio 单选框
					5.checkbox复选框
			 -->
			 <form action="xxxx">
				 <h1>表单数据提交-数据封装</h1>
				 姓名：<input type="text" v-model="user.username" /><br>
				 详情：<textarea v-model="user.info"></textarea><br>
				 <!-- multiple:下拉复选效果,选择时，先选中一个元素，按住Ctrl键，便可以选择其他元素-->
				 城市：<select name="city" v-model="user.city" multiple="true">
							<option value="北京">北京</option>
							<option value="上海">上海</option>
							<option value="成都">成都</option>
							<option value="杭州">杭州</option>
						</select><br>
				 性别：
						<input type="radio" name="gender" value="男" v-model="user.gender"/>男
						<input type="radio" name="gender" value="女" v-model="user.gender"/>女
						
				 
			 </form>
			 
			 
			
			
		</div>	
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					user:{
						username:'',
						info:'添加用户详细信息',
						//如果数据单值采用字符串，如果是多值，采用数组
						city:[],
						gender:'男'
					}
				},
				
				//定义vue对象中的方法
				methods:{

				}
				
			})
		</script>
	</body>
</html>
